<template>
  <t-scrollbar ref="componentScrollBar" class="page-component__scroll">
    <div>
      <t-select
        v-model:value="searchType"
        placeholder="大尺寸"
        :items="items"
        label-by="fieldName"
        track-by="fieldKey"
        inline
      />
    </div>

    <!-- <t-select
    placeholder="小尺寸"
    :items="items"
    labelBy="fieldName"
    trackBy="fieldKey"
    v-model:value="searchType"
    :size="2"
  /> -->
    <t-tag
      v-for="item in difficultyList"
      :key="item.name"
      v-model="query1.difficulty"
    >
      {{ item.name }}
    </t-tag>
    <t-tag :deletable="true" @delete="deleteTag">标签一</t-tag>
    <t-button>点击3</t-button>
    <div style="padding: 200px 0; height: 300px; width: 800px;">
      <div class="top">
        <t-tooltip content="Top Left text" placement="top-start" always="true">
          <template #reference>
            <t-button type="2" size="small">上左</t-button>
          </template>
        </t-tooltip>
        <t-tooltip content="Top Center text" placement="top">
          <template #reference>
            <t-button type="2" size="small">上边</t-button>
          </template>
        </t-tooltip>
        <t-tooltip content="Top Right text" placement="top-end">
          <template #reference>
            <t-button type="2" size="small">上右</t-button>
          </template>
        </t-tooltip>
      </div>
      <div class="center">
        <div class="center-left">
          <t-tooltip content="Left Top text" placement="left-start">
            <template #reference>
              <t-button type="2" size="small">左上</t-button>
            </template>
          </t-tooltip>
          <br><br>
          <t-tooltip content="Left Center text" placement="left">
            <template #reference>
              <t-button type="2" size="small">左边</t-button>
            </template>
          </t-tooltip>
          <br><br>
          <t-tooltip content="Left Bottom text" placement="left-end">
            <template #reference>
              <t-button type="2" size="small">左下</t-button>
            </template>
          </t-tooltip>
        </div>
        <div class="center-right">
          <t-tooltip
            content="Right Top text"
            placement="right-start"
            always="true"
          >
            <template #reference>
              <t-button type="2" size="small">右上</t-button>
            </template>
          </t-tooltip>
          <br><br>
          <t-tooltip content="Right Center text" placement="right" disabled>
            <template #reference>
              <t-button type="2" size="small">右边</t-button>
            </template>
          </t-tooltip>
          <br><br>
          <t-tooltip
            content="Right Bottom text"
            placement="right-end"
            always="true"
          >
            <template #reference>
              <t-button type="2" size="small">右下</t-button>
            </template>
          </t-tooltip>
        </div>
      </div>
      <div class="bottom">
        <t-tooltip content="Bottom Left text" placement="bottom-start">
          <template #reference>
            <t-button type="2" size="small">下左</t-button>
          </template>
        </t-tooltip>
        <t-tooltip content="Bottom Center text" placement="bottom">
          <template #reference>
            <t-button type="2" size="small">下边</t-button>
          </template>
        </t-tooltip>
        <t-tooltip content="Bottom Right text" placement="bottom-end">
          <template #reference>
            <t-button type="2" size="small">下右</t-button>
          </template>
        </t-tooltip>
      </div>
    </div>

    <div>
      <t-tooltip
        max-width="200"
        content="c广东倍智测聘网络科技股份有限公司成立于2011年1月18日，总部设在广州，在全国有11个分支机构，200多名员工，为超过6000家行业标杆及领先企业、10万家中小企业提供人力资源综合服务，先后获得HRoot颁发的大中华区最佳人才测评机构、大中华区人力资源服务机构品牌33强等荣誉。"
        placement="top"
        @on-popper-show="showlog"
        @on-popper-hide="hidelog"
      >
        <p style="white-space: normal;">
          广东倍智测聘网络科技股份有限公司成立于2011年1月18日，总部设在广州，在全国有11个分支机构，200多名员工
        </p>
        <p><i style="font-size: 18px; color: red;">自定义样式</i></p>
        <template #reference>
          <t-button>Dark(default)</t-button>
        </template>
      </t-tooltip>
      <t-tooltip content="content of tooltip" theme="light" placement="top">
        <template #reference>
          <t-button>Light</t-button>
        </template>
      </t-tooltip>
    </div>

    <div class="check">
      <t-checkbox v-model:checked="state.collect1" label="BTC" value="BTC" />
      <t-checkbox v-model:checked="state.collect2" label="ETH" value="ETH" />
      <t-checkbox
        v-model:checked="state.collect3"
        label="BCH"
        semi
        value="BCH"
      />
      <t-checkbox
        v-model:checked="state.collect4"
        :disabled="true"
        label="LTC"
        value="LTC"
      />
      <t-checkbox
        v-model:checked="state.collect5"
        :disabled="true"
        semi
        label="EOS"
        value="EOS"
      />
      <t-checkbox v-model:checked="state.collect6" :disabled="true" value="HT">
        1111
      </t-checkbox>
    </div>
    <div>
      <t-input placeholder="大尺寸" />
      <br>
      <t-input size="small" placeholder="小尺寸" />
      <br>
      <t-input disabled />
      <br>
      <t-input inline />
      <br>
      <t-input prefix-icon="tasf-fav" suffix-icon="tasf-tip2" inline />
      <br>
      <t-input inline>
        <template #prefixIcon>
          <span class="tasf-fav">1</span>
        </template>

        <template #suffixIcon>
          <span class="tasf-fav">2</span>
        </template>
      </t-input>
    </div>
    <div style="padding: 50px;">
      <t-circle
        :total="100"
        :part="100"
        :width="60"
        :crude="4"
        :is-show-num="true"
      />
    </div>
    <div style="padding: 50px;">
      <t-circle
        :total="100"
        :part="10"
        :width="150"
        :crude="10"
        :is-show-num="false"
      >
        <div :style="{ marginTop: '40px', textAlign: 'center' }">
          <span>自定义文字</span>
        </div>
      </t-circle>
    </div>
    <div style="padding: 50px;">
      <t-popover
        v-model:show="showPopover"
        trigger="click"
        :actions="actions"
        placement="bottom-start"
        theme="dark"
        @select="onSelect"
      >
        <template #reference>
          <t-button type="1">浅色风格</t-button>
        </template>
      </t-popover>
    </div>

    <div style="padding: 50px;">
      <t-button type="2" @click="showOverlay = true">显示遮罩层</t-button>
      <t-overlay :show="showOverlay" @click="showOverlay = false">
        <div class="wrapper">
          <div class="block" @click.stop></div>
        </div>
      </t-overlay>
    </div>

    <div style="padding: 50px;">
      <t-button type="2" @click="showPopup = true">显示抽屉</t-button>
      <t-popup
        v-model:show="showPopup"
        position="right"
        :style="{ width: '40%', height: '100%' }"
      />
    </div>
  </t-scrollbar>
</template>
<script>
import { ref, reactive, computed } from 'vue'
export default {
  setup() {
    const state = reactive({
      collect1: true,
      collect2: false,
      collect3: false,
      collect4: true,
      collect5: true,
      collect6: false,
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment,
    }
  },
  data() {
    return {
      showPopup: false,
      showPopover: false,
      showOverlay: false,
      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
      items: [
        {
          id: null,
          fieldKey: 'names',
          fieldName: '姓名',
          show: null,
          required: null,
          unique: null,
          change: null,
          remove: null,
          sortnum: null,
          type: 'INPUT',
          selectValue: null,
          check: false,
          searchContent: null,
        },
        {
          id: null,
          fieldKey: 'workIds',
          fieldName: '工号',
          show: null,
          required: null,
          unique: null,
          change: null,
          remove: null,
          sortnum: null,
          type: 'INPUT',
          selectValue: null,
          check: false,
          searchContent: null,
        },
      ],
      searchType: 'names',
      difficultyList: [
        { id: 1, name: '内容1' },
        { id: 2, name: '内容2' },
        { id: 3, name: '内容3' },
      ],
      query1: {
        difficulty: 1,
      },
      query2: {
        difficulty: [1],
      },
    }
  },

  methods: {
    onSelect(action) {
      Toast(action.text)
    },
    showlog() {
      console.log('显示了')
    },
    hidelog() {
      console.log('消失了')
    },
    deleteTag(item) {
      console.log(item)
    },
  },
}
</script>
<style lang="less" scoped>
.check {
  .t-checkbox {
    margin-right: 20px;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}

.top {
  text-align: center;
}
.center {
  width: 300px;
  margin: 10px auto;
  overflow: hidden;
  .center-left {
    float: left;
  }
  .center-right {
    float: right;
  }
}
.bottom {
  text-align: center;
}
</style>
